<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自动滑动图片组件</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>自动滑动图片组件演示</h1>
        
        <!-- 图片轮播组件 -->
        <div class="carousel-container" id="carousel">
            <div class="carousel-wrapper">
                <div class="carousel-slide">
                    <img src="https://picsum.photos/800/400?random=1" alt="图片1">
                </div>
                <div class="carousel-slide">
                    <img src="https://picsum.photos/800/400?random=2" alt="图片2">
                </div>
                <div class="carousel-slide">
                    <img src="https://picsum.photos/800/400?random=3" alt="图片3">
                </div>
                <div class="carousel-slide">
                    <img src="https://picsum.photos/800/400?random=4" alt="图片4">
                </div>
            </div>
            
            <!-- 左右箭头 -->
            <button class="carousel-arrow carousel-arrow-left" id="prevBtn">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="15 18 9 12 15 6"></polyline>
                </svg>
            </button>
            <button class="carousel-arrow carousel-arrow-right" id="nextBtn">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
            </button>
            
            <!-- 底部指示点 -->
            <div class="carousel-indicators" id="indicators"></div>
        </div>

        <!-- 配置面板 -->
        <div class="config-panel">
            <h3>配置选项</h3>
            <div class="config-item">
                <label>轮播间隔（毫秒）：</label>
                <input type="number" id="intervalInput" value="3000" min="1000" max="10000" step="500">
            </div>
            <div class="config-item">
                <label>动画速度（毫秒）：</label>
                <input type="number" id="speedInput" value="500" min="200" max="2000" step="100">
            </div>
            <div class="config-item">
                <label>显示箭头：</label>
                <input type="checkbox" id="showArrows" checked>
            </div>
            <div class="config-item">
                <label>显示指示点：</label>
                <input type="checkbox" id="showIndicators" checked>
            </div>
            <button onclick="applyConfig()">应用配置</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>
